[username]/loading.tsx - 用户页加载态

基本信息

属性	值
路径	src/app/[username]/loading.tsx
类型	Next.js Loading UI
功能	用户资料页的加载占位符

功能描述

当用户资料页数据加载时显示的骨架屏占位符，提供与最终布局相似的视觉结构，减少用户感知的加载时间。

代码实现

import { Skeleton } from "@/components/ui/skeleton";

export default function UserProfileLoading() {
  return (
    <div className="container py-6">
      {/* Profile Header */}
      <div className="flex flex-col gap-4 mb-8">
        <div className="flex items-center gap-4">
          <Skeleton className="h-16 w-16 md:h-20 md:w-20 rounded-full" />
          <div className="flex-1">
            <Skeleton className="h-7 w-40 mb-2" />
            <Skeleton className="h-4 w-24" />
          </div>
        </div>
        <div className="flex flex-wrap gap-4 text-sm">
          <Skeleton className="h-5 w-24" />
          <Skeleton className="h-5 w-28" />
          <Skeleton className="h-5 w-32" />
        </div>
      </div>

      {/* Tabs */}
      <Skeleton className="h-9 w-72 mb-4" />

      {/* Content Grid */}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="border rounded-lg p-4 space-y-3">
            <Skeleton className="h-5 w-3/4" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-2/3" />
          </div>
        ))}
      </div>
    </div>
  );
}

UI 结构

Container
├── Profile Header Skeleton
│   ├── Avatar (圆形, responsive)
│   ├── Name + Username
│   └── Stats (3 items)
├── Tabs Skeleton
└── Content Grid (6 cards)
    └── Each card: title + 2 lines content

骨架屏元素

头像区域

元素	尺寸	说明
头像	h-16 w-16 → md:h-20 md:w-20	响应式，移动端小尺寸
圆角	rounded-full	圆形

信息区域

元素	宽度	高度	用途
名称	w-40	h-7	模拟用户名称
用户名	w-24	h-4	模拟 @username

统计区域

元素	宽度	用途
统计1	w-24	Prompts 数量
统计2	w-28	Upvotes 数量
统计3	w-32	Joined 日期

标签页

元素	尺寸	说明
标签栏	h-9 w-72	模拟标签切换器

内容网格

属性	值
网格列数	1 (mobile) / 2 (sm) / 3 (lg)
卡片数量	6
间距	gap-4

卡片内部

元素	宽度	高度	用途
标题	w-3/4	h-5	提示词标题
内容1	w-full	h-4	第一行描述
内容2	w-2/3	h-4	第二行描述

动画效果

Skeleton 组件内置脉冲动画（animate-pulse），提供闪烁效果指示加载中状态。

Next.js 集成

根据 Next.js 的 Loading UI 约定：

• 文件路径: loading.tsx
• 自动包裹同目录的 page.tsx
• 在数据获取期间自动显示
• 数据就绪后自动切换为实际内容

相关文件

• src/app/[username]/page.tsx - 实际页面组件
• src/components/ui/skeleton.tsx - 骨架屏组件